:root {
  --loader--width: 250px;
  --loader--dot-size: 20px;
}

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.loader-dot-wrap {
  height: var(--loader--dot-size);
  width: var(--loader--width);
}

.loader-dot {
  animation: loader ease-in-out 3s infinite;
  height: var(--loader--dot-size);
  width: var(--loader--dot-size);
  background-color: black;
  float: left;
  border-radius: 50%;
  border: 2px solid white;
}

.loader-text {
  margin-top: calc(var(--loader--dot-size));
  margin-bottom: 20%;
  width: 4rem;
  font-family: Helvetica, Arial, sans-serif;
}

.loader-dot:nth-child(1) {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader-dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader-dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader-dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader-dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader-dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}



.loader-text::after {
  content: "Loading";
  font-weight: bold;
  animation: loading-text 2s infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0)
  }
  
  45% {
    transform: translateX(calc(var(--loader--width) - var(--loader--dot-size)))
  }
    
  65% {
    transform: translateX(calc(var(--loader--width) - var(--loader--dot-size)))
  }
  95% {
    transform: translateX(0)
  } 
}
  

@keyframes loading-text {
  0% {
    content: "Loading"
  }
  25% {
    content: "Loading."
  }
  50% {
    content: "Loading.."
  }
  75% {
    content: "Loading..."
  }
}
  